@import url(rem.less);
@width: 100%;
html,
body {
    background: #f5f5f5;
    height: auto;
}

.login {
    width: @width;
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: fixed;
    z-index: 99;
    top: 0;
    left: 0;
    .pt(10);
    .pb(10);
    .h-left {
        .ml(45);
    }
    figure {
        color: #fff;
        .fz(65);
        display: flex;
        align-items: center;
        div {
            .ml(54);
            .mr(54);
        }
    }
}

.header {
    .h-banner {
        .swiper-container {
            width: @width;
            z-index: 1;
            .swiper-wrapper {
                .swiper-slide {
                    img {
                        width: @width;
                    }
                }
            }
            .swiper-pagination {
                .mb(170);
                .swiper-pagination-bullet-active {
                    background: #fff;
                }
                .swiper-pagination-bullet {
                    .w(20);
                    .h(20);
                }
            }
        }
    }
}

.main {
    width: @width;
    .mb(200);
    .swiper-container-information {
        width: 85%;
        margin: auto;
        position: relative;
        .m-nav {
            width: @width;
            position: absolute;
            .t(-163);
            .l(0);
            z-index: 99;
            figure {
                float: left;
                width: 50%;
                .h(163);
                .lh(163);
                .fz(50);
                border: 1px solid #ccc;
                box-sizing: border-box;
                background: #fff;
                text-align: center;
            }
            .active{
                border-bottom: 3px solid #09b5c9;
            }
        }
        .swiper-wrapper {
            .swiper-slide {
                display: none;
                .opts-screen {
                    background: #fff;
                    .pl(36);
                    .pr(36);
                    ul {
                        li {
                            width: @width;
                            display: flex;
                            .pt(35);
                            .pb(35);
                            label {
                                display: inline-block;
                                text-align: center;
                                .w(120);
                                .h(125);
                                .lh(125);
                                .mr(15);
                                .fz(60);
                                color: #bdbdbd;
                                img {
                                    width: @width;
                                }
                            }
                            dl {
                                .w(200);
                                dt {
                                    .w(52);
                                    .h(66);
                                    margin: auto;
                                    img {
                                        width: @width;
                                    }
                                }
                                dd {
                                    .fz(30);
                                    text-align: center;
                                }
                            }
                            input {
                                width: 85%;
                                border: none;
                                border-bottom: 1px solid #ccc;
                            }
                            span {
                                .fz(70);
                                color: #bdbdbd;
                            }
                            .search-btn {
                                width:@width;
                                border: none;
                                background: #ff9800;
                                color: #fff;
                                .fz(50);
                                .h(125);
                                .lh(125);
                                text-align: center;
                                border-radius: 5px;
                            }
                        }
                        li:nth-child(4) {
                            label {
                                img {
                                    width: 60%;
                                }
                            }
                        }
                    }
                    .Prompt {
                        display: flex;
                        justify-content: space-between;
                        align-items: center;
                        .pt(50);
                        .pb(50);
                        border-top: 1px solid #ccc;
                        div {
                            display: flex;
                            .fz(35);
                        }
                        .pro-left {
                            p {
                                color: #333;
                            }
                            span {
                                color: #00bcd4;
                            }
                        }
                        .pro-right {
                            span {
                                color: #333;
                                i {
                                    color: #bdbdbd;
                                    .fz(60);
                                    .ml(10);
                                }
                            }
                        }
                    }
                }
                .opts-bottom {
                    .Reminder {
                        .fz(34);
                        .pt(30);
                        .pb(30);
                        text-align: center;
                        color: #bdbdbd;
                        img {
                            .w(40);
                            .h(50);
                        }
                    }
                    .opts-contain-list {
                        background: #fff;
                        .pt(30);
                        .pb(30);
                        .pl(30);
                        .pr(30);
                        .contain-title {
                            .fz(45);
                            color: #ff6f00;
                            .pt(55);
                            .pb(55);
                            img {
                                .w(38);
                                .h(38);
                                .pr(18);
                            }
                            span {
                                float: right;
                                .fz(40);
                                color: #333333;
                                i {
                                    .fz(60);
                                    .pl(20);
                                }
                            }
                        }
                        .content {
                            display: flex;
                            flex-wrap: wrap;
                            justify-content: space-between;
                            dl {
                                width: 47%;
                                .mt(30);
                                .mb(30);
                                dt {
                                    img {
                                        width: @width;
                                    }
                                }
                                dd {
                                    h4 {
                                        .fz(46);
                                        color: #333;
                                        width: 90%;
                                        overflow: hidden;
                                        word-break: keep-all;
                                        white-space: nowrap;
                                        text-overflow: ellipsis;
                                        margin: 2% 0;
                                    }
                                    p {
                                        .fz(40);
                                        color: #7f8081;
                                        width: 90%;
                                        overflow: hidden;
                                        word-break: keep-all;
                                        white-space: nowrap;
                                        text-overflow: ellipsis;
                                        margin: 2% 0;
                                    }
                                }
                            }
                        }
                    }
                    .opts-contain-sel {
                        background: #fff;
                        .mt(30);
                        .mb(30);
                        .pl(42);
                        .pr(42);
                        .pt(42);
                        .pb(42);
                        h4 {
                            .fz(45);
                        }
                        p {
                            .fz(35);
                        }
                        img {
                            width: @width;
                            .mt(40);
                            .mb(40);
                        }
                    }
                }
            }
            .swiper-slide:first-child{
                display: block;
            }
        }
    }
    .foot-banner {
        width: @width;
        img {
            width: @width;
        }
    }
}

.footer {
    width: @width;
    display: flex;
    justify-content: space-around;
    align-items: center;
    background: #fff;
    position: fixed;
    .b(0);
    .l(0);
    z-index: 99;
    dl {
        width: 20%;
        text-align: center;
        .mt(30);
        .mb(18);
        dt {
            .w(85);
            .h(85);
            margin: auto;
            img {
                width: @width;
            }
        }
        dd{
            .fz(30);
        }
    }
}